<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>页面模板:{{ msg }}</h1>
    </div>
    <script type="module"> 
        import { createApp,h } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            template:"<h1>template属性定义页面模板:{{ msg }}</h1>",
            render:function(){
                console.log("render函数被执行");
                // return "<h1>render定义页面模板</h1>"
                // let h1Dom = document.createElement("h1");
                // h1Dom.innerHTML = "render定义页面模板"
                // return h1Dom
                
                // 该函数必须提供返回一个由JS描述的对象结构数据，提供vue的页面模板功能
                // h(tagName [,props] [,children])
                let vnode1 = h("h1",[ "render定义页面模板:"+this.msg ]);
                let vnode2 = h("input",{ type:"text",value:this.msg });

                console.log(vnode1,vnode2);
                return [vnode1,vnode2];
            },
            data(){
                return {
                    msg:"msg变量"
                }
            }
        }).mount("#app")
    </script>
</body>
</html>